<template>
  <a-modal :title="`接口详情`" :width="1000" :confirm-loading="confirmLoading" :footer="null" @ok="handleOk()">
    <a-layout>
      <!-- 头部基本信息 -->
      <a-layout-header>
        <a-descriptions title="基本信息">
          <a-descriptions-item label="接口名称">{{ ports1.portsName }}</a-descriptions-item>
          <a-descriptions-item label="请求协议">{{ portsProtocol2 }}</a-descriptions-item>
          <a-descriptions-item label="接口状态">{{ portsStatus2 }}</a-descriptions-item>
          <a-descriptions-item label="请求方式">{{ RequestMethod }}</a-descriptions-item>
          <a-descriptions-item label="支持格式">{{ ports1.portsProtocol }}</a-descriptions-item>
          <a-descriptions-item label="IP 端口">{{ ports1.portsIp }} </a-descriptions-item>
          <a-descriptions-item label="超时时间"> {{ ports1.portsOutTime }}</a-descriptions-item>
          <a-descriptions-item label="Path"> {{ ports1.portsPath }} </a-descriptions-item>
          <a-descriptions-item label="接口描述">{{ ports1.portsMsg }} </a-descriptions-item>
        </a-descriptions> </a-layout-header
      ><hr /> <br />

      <!-- 中间请求参数 -->
      <a-layout-content>
        <div id="components-table-demo-size">
          <h3>请求参数</h3>
          <a-table :data-source="paramList1" size="middle" bordered :pagination="false">
            <a-table-column key="paramsName" data-index="paramsName">
              <template #title><span>参数名</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsPath1 }}
              <template #title><span>参数位置</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsType1 }}
              <template #title><span>数据类型</span></template>
            </a-table-column>
            <a-table-column key="paramsName"
              >{{ paramsIsNull2 }}
              <template #title><span>是否必填</span></template>
            </a-table-column>
            <a-table-column key="paramsName" data-index="paramsDefault">
              <template #title><span>默认请求参数</span></template>
            </a-table-column>
            <a-table-column key="paramsName" data-index="paramsMsg">
              <template #title><span>说明</span></template>
            </a-table-column>
          </a-table>
          <!-- 请求BOdy -->
          <h3>请求BOdy</h3>
          <a-table
            :data-source="bodyTree"
            size="small"
            bordered
            :pagination="false"
            :columns="[
              { title: '参数名称', dataIndex: 'bodyName' },
              { title: '数据类型', dataIndex: 'bodyType' },
              { title: '参数说明', dataIndex: 'bodyMsg' },
            ]"
          />
        </div>
        <hr /> <br />

        <!-- 底部接口返回参数 -->
        <div id="box1">
          <h3>接口返回参数</h3>
          <a-table
            bordered
            :pagination="false"
            class="ant-table-striped"
            size="middle"
            :columns="[
              { title: '参数名称', dataIndex: 'returnName' },
              { title: '数据类型', dataIndex: 'returnType' },
              { title: '参数说明', dataIndex: 'returnMsg' },
            ]"
            :data-source="returnTree"
          /><br />
        </div>
      </a-layout-content>
    </a-layout>
  </a-modal>
</template>
<script setup lang="ts">
  import { defineEmits, Ref, ref, watch } from 'vue';
  import { selectDir } from '@/api/test/interFace';
  import { portsList, paramsList, returnsList, requestBodsList } from '../type/index';
  //弹窗
  ///setup中使用emits,需要先声明，定义属性数量
  const emit = defineEmits(['changeShow']);
  const confirmLoading = ref<boolean>();
  const handleOk = () => {
    emit('changeShow', 'false');
    confirmLoading.value = false;
  };
  // 接收父组件数据
  const props = defineProps({
    postIdName: {
      type: Number,
    },
  });
  // 打开弹窗，数据变化，请求接口
  let id = ref(0);
  watch(
    () => props.postIdName,
    nval => {
      if (nval) {
        id.value = nval;
      }
      let data = {
        portsId: id.value,
      };
      selectDir(data).then(res => {
        paramList1.value = res.data.paramList;
        ports1.value = res.data.ports;
        console.log(res, '0000000name');
      });
    },
  );

  //头部基本信息表格
  //  let ports1 = reactive<portsList>({})
  let portsProtocol2 = ref();
  let portsStatus2 = ref();
  let RequestMethod = ref();
  let ports1 = ref<portsList>({
    portsId: 0,
    portsName: '',
    dirId: 0,
    portsSource: '',
    portsMsg: '',
    portsProtocol: 0, //接口协议(1:http;2:https)
    portsIp: '',
    portsPath: '',
    portsRequestMethod: 0, //1:Get;2:Post
    portsOutTime: 0,
    portsStatus: 0, //接口状态(1:未发布;2:已发布;3:已停用)
    modifyTime: '',
    addTime: '',
  });
  // const ports1: Ref<portsList[]> = ref([]);
  //位置转化
  if (ports1.value.portsProtocol == 1) {
    portsProtocol2.value = 'http';
  } else {
    portsProtocol2.value = 'https';
  }
  //类型转换
  if (ports1.value.portsStatus == 1) {
    portsStatus2.value = '未发布';
  } else if (ports1.value.portsStatus == 2) {
    portsStatus2.value = '已发布';
  } else {
    portsStatus2.value = '已停用';
  }
  //方式转换
  if (ports1.value.portsRequestMethod == 1) {
    RequestMethod.value = 'GET';
  } else {
    RequestMethod.value = 'POST';
  }

  //中间表格请求参数部分
  let paramsPath1 = ref();
  let paramsType1 = ref();
  let paramsIsNull2 = ref();
  const paramList1: Ref<paramsList[]> = ref([]);
  // 位置转化
  if (paramList1.value.paramsPath == 1) {
    paramsPath1.value = 'query';
  } else {
    paramsPath1.value = 'path';
  }
  //类型转换
  if (paramList1.value.paramsType == 1) {
    paramsType1.value = 'String';
  } else if (paramList1.value.paramsType == 2) {
    paramsType1.value = 'Int';
  } else {
    paramsType1.value = 'Float';
  }
  //是否必填转换
  if (paramList1.value.paramsIsNull == 1) {
    paramsIsNull2.value = '否';
  } else {
    paramsIsNull2.value = '是';
  }

  //表格请求BOdy部分
  // let bodyTree = ref<requestBodsList>({
  //   bodyName: '',
  //   bodyType: 0,
  //   bodyIsNull: 0,
  //   bodyDefault: '',
  //   bodyMsg: '',
  //   bodyParents: 0, // 参数类型，数据类型(1:Object;2:String;3:Int;4:Float;5:Array)
  //   codesId: '',
  //   portsId: 0,
  //   bodyLevel: 0,
  // });
  let bodyTree = ref();
  //表格接口返回参数部分
  // let returnTree = ref<returnsList>({
  //   returnId: 0,
  //   returnName: '',
  //   returnType: 0,
  //   returnParents: 0,
  //   codesId: null,
  //   returnMsg: '',
  //   returnLevel: 0,
  //   portsId: 0,
  // });
  let returnTree = ref();
</script>
<style lang="less" scoped>
  th.column-money,
  td.column-money {
    text-align: right !important;
  }

  .ant-layout {
    border: 1px solid #000;
    width: 100%;
    height: 100%;
    background-color: white;

    hr {
      width: 100%;
      height: 2px;
      background-color: #000;
    }

    .ant-layout-header {
      height: 160px;
      background-color: white;
    }

    .ant-table-wrapper {
      margin: 30px;
    }

    h3 {
      margin-bottom: -30px;
      margin-left: 30px;
      font-weight: bolder;
    }
  }

  #box1 {
    width: 700px;
  }
</style>
